import React, { useEffect, useCallback, useState } from "react"
import request from "../../utils/request"
import { Table, Input, InputNumber, Popconfirm, Form, Typography, Button, Select, Modal, message } from 'antd';
import Add from "./add"
import Edit from "./Edit"
let input = '';
let field = "userid";
let page = 1
function List() {
    //用于表格展示数据
    const [datalist, changelist] = useState([])
    //用于存储请求返回数据
    const [data, changedata] = useState([]);
    //用于控制添加页面显示与隐藏
    const [visible, changevs] = useState(false)
    //用于控制修改页面的显示与隐藏
    const [edit, changeedit] = useState(false)
    //用于给修改组件传递参数
    const [editlist, change] = useState([])

    const getData = useCallback(async () => {
        const list = await request.get("/student/selectall")
        console.log("data", list);
        const { data: { ret: { data } } } = list
        console.log(data);
        changelist(data);
        changedata(list);

    }, [])

    const remove = useCallback(async (id) => {
        const { data } = await request.delete('/student/delete', { data: { userid: id } });
        if (data.code === 200) {
            message.success('学生信息删除成功')
            getData()
        } else {
            message.success('学生信息删除失败')
        }
    }, [])


    const select = useCallback(async (field, input) => {
        const list = await request.post('/student/select', { field, input })
        console.log(list.data.ret);
        changelist(list.data.ret)
    }, [])

    useEffect((page = 1) => {
        getData(page);
    }, [page])
    console.log(2222);
    console.log('shuju', data);
    const Columns = [
        {
            // 设置表头
            title: '#',
            // 设置当前列显示什么数据
            // dataIndex: 'userid',
            key: '_id',
            editable: true,
            render: (text, row, index) => {
                return (
                    <>
                        {index + 1}
                    </>
                )
            }
        },
        {
            // 设置表头
            title: '学号',
            // 设置当前列显示什么数据
            dataIndex: 'userid',
            key: '_id',
            editable: true
        },
        {
            // 设置表头
            title: '姓名',
            dataIndex: 'username',
            key: '_id',
            editable: true,
        },
        {
            // 设置表头
            title: '性别',
            // 设置当前列显示什么数据
            dataIndex: 'sex',
            key: '_id',
        },
        {
            // 设置表头
            title: '出生年月',
            // 设置当前列显示什么数据
            dataIndex: 'birth',
            key: '_id',
        },
        {
            // 设置表头
            title: '联系电话',
            // 设置当前列显示什么数据
            dataIndex: 'phone',
            key: '_id',
        },
        {
            // 设置表头
            title: '所属学院',
            // 设置当前列显示什么数据
            dataIndex: 'college',
            key: '_id',
        },
        {
            // 设置表头
            title: '所属专业',
            // 设置当前列显示什么数据
            dataIndex: 'major',
            key: '_id',
        },
        {
            // 设置表头
            title: '所属班级',
            // 设置当前列显示什么数据
            dataIndex: 'garde',
            key: '_id',

        },
        {
            // 设置表头
            title: '寝室号',
            // 设置当前列显示什么数据
            dataIndex: 'dormitory',
            key: '_id',
        },

        {
            // 设置表头
            title: '操作',
            // 设置当前列显示什么数据
            key: '_id',
            render: (row) => {
                return (
                    <>
                        <Button type="primary" size="small" ghost onClick={() => {
                            changeedit(true);
                            change(row);
                        }}>编辑</Button>
                        <Popconfirm title="确认删除" onConfirm={() => { remove(row.userid) }}>
                            <Button size="small" danger>删除</Button>

                        </Popconfirm>
                    </>
                )
            }
        },


    ]

    return (
        <>
            <Button style={{ float: "left" }} onClick={() => {
                changevs(!visible);
            }}>添加</Button>
            <Button style={{ float: "right" }} onClick={() => { getData(1) }}>显示全部</Button>
            <Input.Group compact style={{ textAlign: "center", width: 500, margin: "auto" }}>
                <Select defaultValue="userid" onChange={(value) => field = value}>
                    <Select.Option value="userid">学号</Select.Option>
                    <Select.Option value="username">姓名</Select.Option>
                    <Select.Option value="college">学院</Select.Option>
                    <Select.Option value="major">专业</Select.Option>
                    <Select.Option value="garde">班级</Select.Option>
                    <Select.Option value="dormitory">寝室</Select.Option>
                </Select>
                <Input style={{ width: '50%' }} placeholder="请输入相应内容查询" onChange={(e) => { input = e.target.value }} />
                <Button onClick={() => {
                    select(field, input)
                    input = "";
                }}>查询</Button>

            </Input.Group>

            <Table
                rowKey="_id"
                columns={Columns}
                dataSource={datalist}
                // rowSelection={rowSelection}
                // pagination={pagination}
                bordered
                style={{ height: "55%", marginTop: "20px" }}
            />
            <Modal
                title=""
                visible={visible}
                // onOk={handleOk}
                // confirmLoading={ }

                width="700px"
                onCancel={() => {
                    changevs(false);
                    getData(page)
                }}
                footer={null}
            >
                <Add></Add>
            </Modal>
            <Modal
                title=""
                visible={edit}
                // onOk={handleOk}
                // confirmLoading={ }

                width="700px"
                onCancel={() => {
                    change({})
                    changeedit(false);
                    getData(page)
                    // getData(page)
                    // forceUpdate()
                }}
                footer={null}
            >
                <Edit data={editlist} ></Edit>
            </Modal>
        </>
    )

}

export default List